<template>
	<view class="order_list">
		<nav>
			<view>
				<image src="../../static/user/53.png"></image>
				<p>{{item.shop_name}}</p>
				<span v-if='item.order_status==1'>订单将在<u-count-down :time="dates"
						format="mm:ss"></u-count-down>后自动取消</span>
			</view>
			<p>{{item.order_status_txt}}{{item.last_order_type==1?'(已加钟)':item.last_order_type==2?'(已升级)':''}}</p>
		</nav>
		<main>
			<image :src="$imgUrl +item.goods_image"></image>
			<view>
				<p class='price'>
					{{item.username}}
					<span><b>￥</b>{{item.goods_price}}</span>
				</p>
				<p class='num'>
					<span>服务项目：{{item.goods_name}}</span>
					<span>×{{item.num}}</span>
				</p>
				<view class="practical">
					<p>{{item.intro}}</p>
					<span>实付:￥{{item.pay_amount}}</span>
				</view>
			</view>
		</main>
		<footer>
			<button v-if="item.order_status == 6&&item.last_order_type==0"
				@click="skip('/pages/appointment/appointment?id='+item.tec_id+'&type=999&price='+item.goods_price+'&order_sn='+item.order_sn)">升级</button>
			<!-- <button v-if="item.order_status == 6"
				@click="skip('/pages/orderForGoods/orderForGoods?id='+item.tec_id+'&type=1000&goods_id='+item.goods_id+'&order_sn='+item.order_sn)">加钟</button> -->
				<button v-if="item.order_status == 6"
				@click="skip('/pages/appointment/appointment?id='+item.tec_id+'&type=1000&price=0&order_sn='+item.order_sn)">加钟</button>
			<button v-if="item.order_status == 7"
				@click="skip('/pages/appointment/appointment?name='+item.username+'&id='+item.tec_id+'&num='+item.score+'&txt='+item.intro+'&img='+item.avatar+'&eva='+item.evaluate_count)">再来一单</button>
			<button @click="skip('/pages/inDetail/inDetail?order_sn='+item.id)">订单详情</button>
			<button
				v-if="item.order_status == 2 || item.order_status == 3 || item.order_status == 4 || item.order_status == 5 "
				class="button" @click="toCancel(item.id)">取消订单</button>
			<button v-if="item.order_status == 1" class="button" @click="toPay(item.order_sn)">立即支付</button>
			<button v-if="item.order_status == 7" @click="skip('/pages/comment/comment?order_sn='+item.order_sn)"
				class="button">评论</button>
		</footer>
	</view>
</template>

<script>
	import emit from '@/config/emit.js'
	export default {
		name: "order_list",
		data() {
			return {};
		},
		props: ['item'],
		methods: {
			skip(url) {
				uni.navigateTo({
					url,
				})
			},
			toCancel(id) {
				uni.showModal({
					title: '取消订单',
					content: '您确定要取消订单吗?',
					success: (res) => {
						if (res.confirm) {
							this.$httpRequest('/order/cancelOrder', {
								id,
							}).then(res => {
								uni.showToast({
									title: "取消成功",
									duration: 2000
								});
								emit.$emit('orderForm', 1);
							});
						} else if (res.cancel) {}
					}
				});
			},
			toPay(orderInfo) {
				this.$httpRequest('/pay/pay', {
					order_sn: orderInfo
				}).then(data => {

					function onBridgeReady() {
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
								"appId": data.data.appId, //公众号ID，由商户传入     
								"timeStamp": data.data.timeStamp, //时间戳，自1970年以来的秒数     
								"nonceStr": data.data.nonceStr, //随机串     
								"package": data.data.package,
								"signType": "RSA", //微信签名方式：     
								"paySign": data.data.paySign, //微信签名 
							},
							function(datas) {
								if (datas.err_msg == "get_brand_wcpay_request:ok") {
									emit.$emit('refresh', 1);
								}
							});
					}
					if (typeof WeixinJSBridge == "undefined") {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
							document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						}
					} else {
						onBridgeReady();
					}
				})
			},
		},
		computed: {
			dates() {
				let create = +new Date(this.item.create_time)
				let time = +new Date()
				return create + 1000 * 60 * 15 - time
			}
		}
	}
</script>

<style lang="less">
	.order_list {
		width: 100%;
		margin-bottom: 20rpx;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		color: #333;
		background: #fff;
		border-radius: 20rpx;

		&>footer {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			padding: 10rpx 0 2rpx;

			&>.button {
				border: 1px solid #52C276;
				color: #fff;
				background: #52C276;
			}

			&>button {
				min-width: 146rpx;
				height: 46rpx;
				line-height: 46rpx;
				border-radius: 23rpx;
				font-size: 12px;
				padding: 0;
				background: #fff;
				border: 1px solid #999999;
				margin: 0 0 0 10rpx;
				color: #666666;
			}
		}

		&>main {
			width: 100%;
			margin-top: 8rpx;
			display: flex;

			&>image {
				width: 132rpx;
				height: 146rpx;
				border-radius: 8rpx;
				image-rendering: -moz-crisp-edges;
				image-rendering: -o-crisp-edges;
				image-rendering: -webkit-optimize-contrast;
				image-rendering: crisp-edges;
				-ms-interpolation-mode: nearest-neighbor;
			}

			&>view {
				padding-left: 28rpx;
				flex: 1;

				&>view,
				&>p {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				&>.practical {
					&>p {
						width: 280rpx;
						color: #999999;
						font-size: 8px;
					}

					&>span {
						font-size: 13px;
					}
				}

				&>.num {
					font-size: 11px;
					color: #666666;
				}

				&>.price {
					font-size: 13px;
					display: flex;
					align-items: center;
					font-weight: bold;

					&>span {
						font-size: 18px;
						font-weight: 400;

						&>b {
							font-size: 12px;
							font-weight: 400;
						}
					}
				}
			}
		}

		&>nav {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&>p {
				font-size: 13px;
				color: #D72C29;
			}

			&>view {
				display: flex;
				align-items: center;

				&>span {
					font-size: 10px;
					color: #999999;
					display: flex;
					align-items: center;
				}

				&>p {
					font-size: 13px;
					margin: 0 24rpx 0 16rpx;
				}

				&>image {
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}
</style>